<style lang="scss">
.page-format {
  .demo-asd {
    padding: 0 10px;
    border: 1px solid #eee;
  }
}
</style>

<template>
  <div class="page-format">
    <z-space vertical>

      <div>
        <el-button @click="openSd">sss</el-button>
<!--        <el-button @click="openAd">sss</el-button>-->
      </div>

<div class="demo-asd">
  <p>100000 -> 10万</p>
  <p>{{100000 | tranNumber(2) }}</p>
</div>
      <div class="demo-asd">
        <p>两位小数</p>
<p>{{math.format(2.3,  {notation: 'fixed', precision: 2})    }}</p>
      </div>
      <div class="demo-asd">
        <p>时间</p>
        <p>format使用<a href="https://dayjs.gitee.io/">dayjs</a></p>
        <p>{{Number('3122121111111') | dayjs_formatDate}}</p>
        <p>{{Number('3122121111111') | dayjs_formatDate('YYYY')}}</p>
        <p>{{sec | dayjs_fromNow}}</p>
        <p>{{dec | dayjs_fromNow}}</p>
        <p>2020-10-01是第{{'2020-10-01' | dayjs_quarterOfYear}}季度</p>
        <p>2016-10-20 在2016-01-01 和 2016-10-30之间吗</p>
        <p>{{'2016-10-20' | dayjs_isBetween('2016-01-01', '2016-10-30', 'day') }} </p>
      </div>
    </z-space>

    <RemoteFileViewer file="example/views/format/base.vue"></RemoteFileViewer>
  </div>
</template>

<script>

import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";

import * as math from 'mathjs'
import TestPopoverContent from "@example/views/format/component/TestPopoverContent";
CustomCusComponent.registerOnce(TestPopoverContent)

export default {
  components: {RemoteFileViewer},
  data() {
    return {
    }
  },
  setup() {
    return {
      sec: Date.now() - 100000,
      dec: Date.now() - 56000000,
      math,
    }
  },
  methods: {
    openSd() {
      this.$zAction({
        content: TestPopoverContent
      }).then(item => {
        console.log('item', item)
      })
    },
    openAd() {
      this.$zDialog({
        content: TestPopoverContent
      })
    }
  }
}
</script>
